<template>
    <uni-popup ref="popupRef" :type="type" :background-color="backgroundColor" :border-radius="borderRadius"
               :is-mask-click="false" @maskClick="cancel">
        <view class="select-dialog">
            <view v-if="showSelectBar" class="select-bar">
                <slot name="header"></slot>
                <view v-if="showBtn" class="action" :style="'color:'+cancelColor+';'" @tap="cancel">
                    {{ cancelText }}
                </view>
                <view v-if="title" class="title">{{ title }}</view>
                <view v-if="showBtn" class="action" :style="'color:'+confirmColor+';'" @tap="confirm">
                    {{ confirmText }}
                </view>
            </view>
            <view v-if="false && search" class="search-view">
                <uni-search-bar class="search-bar" v-model="searchValue" radius="100" :placeholder="placeholder"
                                cancelButton="none" @input="searchInput" @confirm="searchHandler"/>
                <view class="search-btn" @tap="searchHandler">查询</view>
            </view>
            
            <view class="select-content" :style="{'height':_height}">
                <slot></slot>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
const emits = defineEmits(['confirm', 'cancel', 'search', 'searchHandler'])

const props = defineProps({
    backgroundColor: {type: String, default: '#fff'},
    borderRadius: {type: String, default: '20rpx 20rpx 0 0'},
    title: {type: String, default: ''},
    height: {type: [Number, String], default: '800rpx'},
    search: {type: Boolean, default: true},
    showSelectBar: {type: Boolean, default: true},
    showBtn: {type: Boolean, default: true},
    cancelText: {type: String, default: '取消'},
    confirmText: {type: String, default: '确认'},
    cancelColor: {type: String, default: "#909399"},
    confirmColor: {type: String, default: "#317af7"},
    type: {type: String, default: "bottom"},
    placeholder: {type: String, default: "搜索"},
})

const popupRef = ref()
const searchValue = ref('')
const _height = computed(() => {
    if (typeof props.height === 'number') {
        return props.height + 'rpx'
    } else {
        return props.height
    }
})

// 搜索框值变化
const searchInput = qly.runtime.debounce((e) => {
    emits('search', e)
}, 1000)

// 取消按钮
function cancel() {
    emits('cancel')
    close()
}

// 确认
function confirm() {
    emits('confirm')
}

// 打开弹窗
function open(searchValue1) {
    // searchValue.value = searchValue1 || ''
    popupRef.value.open()
}

// 关闭弹窗
function close() {
    nextTick(() => {
        popupRef.value.close()
    })
}

const searchHandler = () => {
    emits('searchHandler')
}

defineExpose({
    open,
    close
})
</script>

<style scoped lang="scss">
.select-dialog {
    display: flex;
    flex-direction: column;
}

.select-dialog .select-bar {
    padding: 0 32rpx;
    display: flex;
    position: relative;
    align-items: center;
    min-height: 96rpx;
    justify-content: space-between;
    border-bottom: 1px solid $qly-border-color;
}

.select-dialog .select-bar .action {
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    max-width: 100%;
}

.select-dialog .select-bar .title {
    font-size: 36rpx;
    font-weight: bold;
    /*让内容始终在中间*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.select-dialog .select-content {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}


.search-view {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx;
    
    .search-bar {
        flex: 1;
        padding-left: 0 !important;
    }
    
    .search-btn {
        padding-right: 4rpx;
        color: #317af7;
        text-align: center;
        height: 60rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: 28rpx;
    }
    
    :deep(.uni-searchbar__text-placeholder) {
        font-size: 24rpx;
    }
    
    :deep(.input-placeholder) {
        font-size: 24rpx;
    }
}


.search-view:deep(.uni-input-input) {
    text-align: left !important;
}

.search-view:deep(.uni-input-placeholder) {
    text-align: left !important;
}
</style>
